import React from 'react';
import './index.css';
import axios from '../../axios/index'
import { userInfo } from '../../redux/action'
import { message } from 'antd'
import { connect } from 'react-redux'
import { withRouter } from 'react-router-dom'

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.signInBtn = React.createRef()
    this.signUpBtn = React.createRef()
    this.fistForm = React.createRef()
    this.secondForm = React.createRef()
    this.container = React.createRef()
  }

  state = {
    loginEmail: '',
    loginPwd: '',
    registerEmail: '',
    registerPwd: '',
    registerName: ''
  }

  render() {

    const changeRegister = () => {
      console.log()
      this.container.current.classList.remove('right-panel-active')
    }

    const changeLogin = () => {
      console.log(this.container.current.classList)
      this.container.current.classList.add('right-panel-active')
    }

    const register = () => {
      const id = Math.floor(Math.random() * 100000000)
      let email = this.state.registerEmail
      let password = this.state.registerPwd
      let name = this.state.registerName
      let data = {id, name, email, password}
      axios.ajax({
        url: '/admin/register',
        data: {
          params: {
            ...data
          }
        }
      }).then((res) => {
        if (res.status === 200 && res.code === 0) {
          // const { dispatch } = this.props
          // dispatch(userInfo(res.result))
          // localStorage.setItem('bikeInfo', JSON.stringify(res.result))
          message.success('登录成功')
          this.props.history.push('/home')
        }
      })
    }

    const InputEmailChange = (event) => {
      this.setState({
        loginEmail: event.target.value
      })
    }

    const InputPasswordChange = (event) => {
      this.setState({
        loginPwd: event.target.value
      })
    }

    const registerNameChange = (event) => {
      this.setState({
        registerName: event.target.value
      })
    }

    const registerEmailChange = (event) => {
      this.setState({
        registerEmail: event.target.value
      })
    }

    const registerPwdChange = (event) => {
      this.setState({
        registerPwd: event.target.value
      })
    }

    const login = () => {
      let email = this.state.loginEmail
      let password = this.state.loginPwd
      let data = {email, password}
      axios.ajax({
        url: '/admin/login',
        data: {
          params: {
            ...data
          }
        }
      }).then((res) => {
        if (res.status === 200 && res.code === 0) {
          const { dispatch } = this.props
          dispatch(userInfo(res.result))
          message.success('登录成功')
          this.props.history.push('/')
        }
      })
    }

    return (
      <div className="login-page">
        <div className="login_container" ref={this.container}>
          <div className="container__form container--signup">
            <div className="form" id="form1" ref={this.fistForm}>
              <h2 className="form__title">注册</h2>
              <input
                type="text"
                placeholder="用户名"
                className="input"
                value={this.state.registerName}
                onChange={registerNameChange}
              />
              <input
                type="email"
                placeholder="邮箱"
                className="input"
                value={this.state.registerEmail}
                onChange={registerEmailChange}
              />
              <input
                type="password"
                placeholder="密码"
                className="input"
                value={this.state.registerPwd}
                onChange={registerPwdChange}
              />
              <button className="btn" onClick={register}>注册</button>
            </div>
          </div>

          <div className="container__form container--signin">
            <div className="form" id="form2" ref={this.secondForm}>
              <h2 className="form__title">登录</h2>
              <input
                type="email"
                placeholder="邮箱"
                className="input"
                value={this.state.loginEmail}
                onChange={InputEmailChange}
              />
              <input
                type="password"
                placeholder="密码"
                className="input"
                value={this.state.loginPwd}
                onChange={InputPasswordChange}
              />
              <a href="/#" className="link">忘记密码?</a>
              <button className="btn" onClick={login}>登录</button>
            </div>
          </div>

          <div className="container__overlay">
            <div className="overlay">
              <div className="overlay__panel overlay--left">
                <button className="btn" id="signIn" onClick={changeRegister} ref={this.signInBtn}>登录</button>
              </div>
              <div className="overlay__panel overlay--right">
                <button className="btn" id="signUp" onClick={changeLogin} ref={this.signUpBtn}>注册</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

export default connect()(withRouter(Login))
